<template>
    <section class="booking">
        <tab class="booking-dates" :line-width="2" active-color='#fff' default-color="#1dba9c" :animate=false :index.sync="selectIndex">
            <tab-item class="vux-center booking-dates-item" :selected="date.date==curCourtDates[0].date" v-for="date in curCourtDates" @click="onSelectDate(curCourt,date.date)">
                <p class="date-chn">{{date.weekday}}</p>
            </tab-item>
        </tab>
        123123123
        <flexbox :gutter="0">
            <flexbox-item :span="1/7">
                <table class="field-table field-timeline" cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in curCourtFields.timeRange">
                            <td> {{item}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </flexbox-item>
            <flexbox-item :span="6/7">
                <table class="field-table field-fields" cellpadding="0" cellspacing="0">
                    <thead>
                        <td v-for="fieldItem in curCourtFields.fieldName">
                            <div>
                                {{fieldItem.name}}
                            </div>
                        </td>
                    </thead>
                    <tbody>
                        <tr v-for="time in curCourtFields.timeRange">
                            <td v-for="field in curCourtFields.fieldName">
                                <div id="{{time+','+field.index}}" class="unvailable" :class="{'userselected':isAlreadySelected(time,field.index)}" @click="onSelectField($event.target)">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </flexbox-item>
        </flexbox>
        <div v-for="item in courtSelected">
            {{item.id}}
        </div>
        <flexbox>
            <flexbox-item>
                <x-button type="primary" @click="goNext()">下一步</x-button>
            </flexbox-item>
        </flexbox>
        </div>
    </section>
</template>
<script>
import {
    Tab,
    TabItem
} from 'vuxComponents/tab';
import {
    Flexbox,
    FlexboxItem
} from 'vuxComponents/flexbox';
import {
    go
} from '../libs/router';
import XButton from 'vuxComponents/x-button';
import courtAction from '../vuex/actions/courtAction';
import courtGetter from '../vuex/getters/courtGetter';
export default {
    components: {
        Tab,
        TabItem,
        Flexbox,
        FlexboxItem,
        XButton
    },
    props: {
        curCourt: String
    },
    data() {
        return {
            selectIndex: 0,
            selectDate: "",
            courtid: this.$route.params.courtid
        }
    },
    created() {
        //带出可预订时间范围
        let courtid = this.$route.params.courtid;
        this.getCourtDate(courtid).then(() => {
            let _queryDate = this.$route.query.date;
            if (_queryDate) {
                this.selectDate = _queryDate;
            } else {
                this.selectDate = (this.curCourtDates && this.curCourtDates.length > 0) ? this.curCourtDates[0].date : "";
            }
            this.getCourtFields(courtid, this.selectDate);
        })
    },
    computed: {
        curCourtDates() {
            const key = "court_" + this.courtid + "_date_";
            var curCourtDate = this.courtDate[key];
            if (curCourtDate && curCourtDate.dateRange) {
                return curCourtDate.dateRange;
            } else {
                return [];
            }
        },
        curCourtFields() {
            const key = "court_" + this.courtid + "_date_" + this.selectDate + "_field_";
            var curCourtField = this.courtField[key];
            if (curCourtField && curCourtField.date) {
                var _self = this;
                Vue.nextTick(function() {
                    _self.setGridStatus();
                })
                return curCourtField;
            } else {
                return {};
            }
        }
    },
    methods: {
        onSelectDate(courtid, date) {
            var td = document.getElementsByClassName("field")
            td.style = "background-color:#000";
            this.selectDate = date;
        },
        setGridStatus() {
            this.curCourtFields.availableFields.map((field) => {
                var [
                    time,
                    index,
                    id,
                    group,
                    price
                ] = field;
                var fieldDomId = (time + ',' + index);
                var fieldDom = document.getElementById(fieldDomId);
                if (fieldDom) {
                    fieldDom.innerHTML = price + "元";
                    fieldDom.classList.remove("unvailable");
                    fieldDom.classList.add("vailable");
                    fieldDom.dataset["time"] = time;
                    fieldDom.dataset["index"] = index;
                    fieldDom.dataset["id"] = id;
                    fieldDom.dataset["group"] = group;
                    fieldDom.dataset["price"] = price;
                }
            })
        },
        onSelectField(fieldDom) {
            var fieldItem = fieldDom.dataset;
            if (!fieldItem && fieldItem.id) {
                this.$vux.toast.show({
                    text: '场地不可用'
                });
            } else {
                this.toggleFieldSelectClass(fieldDom.id, fieldItem);
            }
        },
        toggleFieldSelectClass(fieldDomId, fieldItem) {
            let {
                time,
                id,
                index,
                group,
                price
            } = fieldItem;
            let fieldItemObj = {
                time,
                id,
                index,
                group,
                price
            }
            var fieldDom = document.getElementById(fieldDomId);
            var isAdded = this.isAlreadySelected(fieldItem.time, fieldItem.id);
            if (isAdded) {
                this.unSelectCourtField(fieldItemObj);
                fieldDom.classList.remove("userselected");
            } else {
                this.selectCourtField(fieldItemObj);
                fieldDom.classList.add("userselected");
            }
        },
        isAlreadySelected(time, fieldId) {
            var selected = this.courtSelected.find(f => f && f.id === fieldId);
            if (selected) {
                console.log("当前已经选中过")
            }
            return selected;
        },
        goNext() {
            go({
                name: 'booking',
                params: {
                    bookingtype: 0,
                    courtid: 11
                }
            }, this.$router);
        }
    },
    vuex: {
        getters: {
            courtDate: courtGetter.getCourtDate,
            courtField: courtGetter.getCourtField,
            courtSelected: courtGetter.getCourtFieldSelect
        },
        actions: {
            getCourtDate: courtAction.getCourtDate,
            getCourtFields: courtAction.getCourtFields,
            selectCourtField: courtAction.selectCourtField,
            unSelectCourtField: courtAction.unSelectCourtField
        }
    }
}
</script>
<style lang="sass" scoped>
.booking {
    background-color: #FFF;
    color: #1dba9c;
    .booking-dates {
        .booking-dates-item.vux-tab-selected {
            background-color: #1dba9c;
            color: #fff;
        }
    }
    td {
        height: 40px;
        text-align: center;
    }
    .field-table {
        width: 100%;
        background-color: #FFF;
        color: #1dba9c;
        font-size: auto;
    }
    .field-timeline {
        color: #000;
    }
    .field-fields {
        th {
            color: #000;
        }
        tbody {
            div {
                height: 40px;
                line-height: 40px;
            }
        }
        .unvailable {
            background-color: #eee;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .vailable {
            background-color: #FFF;
        }
        .userselected {
            background-color: #1dba9c;
            color: #fff;
        }
    }
}
</style>
